import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView Demo"),
        actions: [IconButton(onPressed: () {}, icon: Icon(Icons.share))],
      ),
      body: ListViewDemo(),
    );
  }
} 

//ListView 滚动列表, 除了 滚动组件的公用属性, 还有额外的一些属性
//itemExtent: 子组件的高度 / 宽度, 相当于 TableView的 rowHeight, 设置固定值的性能会高于自适应高度
//prototypeItem: 列表项原型, 如果我们知道列表中的所有列表项长度都相同但不知道具体是多少，这时我们可以指定一个列表项，该列表项被称为 prototypeItem
//构造函数:
//1. 通过 children参数 接受一个Widget列表, 适合只有少量的子组件数量已知且比较少的情况
//2.ListView.builder:  适合列表项比较多或者列表项不确定的情况
//3.ListView.separated: 可以在生成的列表项之间添加一个分割组件，它比ListView.builder多了一个separatorBuilder参数

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [_verListView(), _horListView(), _buildListView(),_separatedListView()],
      ),
    );
  }

  Widget _verListView() {
    return Container(
      height: 200,
      color: Colors.amber[50],
      child: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.ac_unit),
            title: Text("名称 : ac_unit"),
            subtitle: Text("描述: xxxx"),
            trailing: Icon(Icons.keyboard_arrow_right),
          ),
          ListTile(
            leading: Icon(Icons.backpack_sharp),
            title: Text("名称 : backpack_sharp"),
            subtitle: Text("描述: xxxx"),
            trailing: Icon(Icons.keyboard_arrow_right),
          ),
          ListTile(
            leading: Icon(Icons.cabin_outlined),
            title: Text("名称 : cabin_outlined"),
            subtitle: Text("描述: xxxx"),
            trailing: Icon(Icons.keyboard_arrow_right),
          ),
          ListTile(
            leading: Icon(Icons.face_retouching_natural_outlined),
            title: Text("名称 : face_retouching_natural_outlined"),
            subtitle: Text("描述: xxxx"),
            trailing: Icon(Icons.keyboard_arrow_right),
          ),
        ],
      ),
    );
  }

  Widget _horListView() {
    return Container(
      height: 100,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          Container(
            width: 160,
            color: Colors.red[100],
          ),
          Container(
            width: 160,
            color: Colors.yellow[100],
          ),
          Container(
            width: 160,
            color: Colors.blue[100],
          ),
          Container(
            width: 160,
            color: Colors.cyan[100],
          ),
        ],
      ),
    );
  }

//通过 builder构造器来生成 ListView
  Widget _buildListView() {
    return Container(
      height: 200,
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text("第$index行"),
          );
        },
        itemCount: 50,
        itemExtent: 55,
      ),
    );
  }

  Widget _separatedListView() {

    Widget divider1 = Divider(color: Colors.blue);
    Widget divider2 = Divider(color: Colors.green);

    return Container(
      height: 200,
      child: ListView.separated(
      itemCount: 50,
      itemBuilder: (BuildContext context, int index){
        return ListTile(title: Text("第 $index 行"), leading: Icon(Icons.snooze_sharp));
      }, 
      separatorBuilder: (BuildContext context, int index){
        return index%2==0?divider1:divider2;
      }, 
      )
    );
  }
}
